import { formatNumber, formatAmount, formatPhone, formatMoney, formatDate } from "@/utils/index";
import { useI18n } from "@/hooks/useI18n";
import FieldText from "@/components/FieldComponents/FieldText.vue";
import FieldBool from "@/components/FieldComponents/FieldBool.vue";
import FieldRate from "@/components/FieldComponents/FieldRate.vue";
import FieldSelect from "@/components/FieldComponents/FieldSelect.vue";
import FieldTime from "@/components/FieldComponents/FieldTime.vue";
import FieldUpload from "@/components/FieldComponents/FieldUpload.vue";
import FieldRalation from "@/components/FieldComponents/FieldRalation.vue";
import FieldPrice from "@/components/FieldComponents/FieldPrice.vue";
const { t } = useI18n();
interface Option {
	value: any; //下拉选项的值
	label: string; //下拉选项的标签
	icon?: string; //下拉选项的图标
	pre?: string; //下拉选项前面的提示内容
	showIcon?: Boolean; //下拉选项是否显示图标,
	next?: string; //下拉选项后面的提示内容
	data?: string; //附加内容
}
// 下拉，列表操作 ，数字输入框
type FieldType = "select" | "list" | "NumberInput" | "input";
interface FieldConfig {
	value: number; //字段值
	label: string; //字段标签
	tips?: string; //字段提示
	type: FieldType; //字段类型(转换成对应的组件)
	icon: string; //字段图标
	options?: Option[]; //下拉选项
	chooseValue: any; //下拉选项选择后的值
	field?: string; //当前项需要存入数据库的字段
	other?: Object; //附加的参数
	disabledFn?: Function; //禁用函数
}

interface FieldConfigMap {
	[key: number]: FieldConfig[];
}

//配置字段的时候需要选择的数据
export const useExtraData = (): FieldConfigMap => {
	const extraData: FieldConfigMap = {
		1: [
			{
				value: 1,
				label: t("fieldType.number_obj.title1"),
				type: "select",
				icon: "EachApp_xianshi",
				field: "type",
				options: [
					{ value: 1, label: t("fieldType.number_obj.list1") },
					{ value: 2, label: t("fieldType.number_obj.list2") }
				],
				chooseValue: 1 //选择的值
			},
			{ value: 2, label: t("fieldType.number_obj.title2"), type: "NumberInput", field: "point", icon: "EachApp_xiaoshudian", chooseValue: 0, other: { min: 0, max: 2 } } //选择的值
		],
		2: [
			{
				value: 1,
				label: t("fieldType.default"),
				tips: t("fieldType.currency_obj.tips1"),
				type: "select",
				field: "unit",
				icon: "EachApp_qianbi",
				options: [
					{ value: "¥", label: t("fieldType.currency_obj.list1"), pre: "¥" },
					{ value: "$", label: t("fieldType.currency_obj.list2"), pre: "$" }
				],
				chooseValue: "¥" //选择的值
			},
			{
				value: 2,
				label: t("fieldType.currency_obj.title2"),
				tips: t("fieldType.currency_obj.tips2"),
				type: "select",
				field: "priceType",
				icon: "EachApp_jiaoyi",
				options: [
					{ value: '', label: t("fieldType.currency_obj.list3") },
					{ value: "K", label: "K" },
					{ value: "W", label: "W" },
					{ value: "SW", label: "SW" },
					{ value: "M", label: "M" },
					{ value: "E", label: "E" }
				],
				chooseValue: '' //选择的值
			}
		],
		3: [
			{
				value: 1,
				label: t("fieldType.default"),
				tips: t("fieldType.boolean_obj.tips1"),
				type: "select",
				field: "defaultValue",
				icon: "EachApp_shoucang1",
				options: [
					{ value: "1", label: t("fieldType.boolean_obj.yes") },
					{ value: "0", label: t("fieldType.boolean_obj.no") }
				],
				chooseValue: "1" //选择的值
			}
		],
		4: [
			{
				value: 1,
				label: t("fieldType.date_time_obj.title1"),
				tips: t("fieldType.date_time_obj.tips1"),
				type: "select",
				field: "showTime",
				icon: "EachApp_rili",
				options: [
					{ value: false, label: t("fieldType.date_time_obj.list1") },
					{ value: true, label: t("fieldType.date_time_obj.list2") }
				],
				chooseValue: false //选择的值
			},
			{
				value: 2,
				label: t("fieldType.date_time_obj.title2"),
				tips: t("fieldType.date_time_obj.tips2"),
				type: "select",
				disabledFn: (data, item) => {
					const flag = data.showTime == 1;
					if (flag) {
						item.chooseValue = "yearMonthDay";
					}
					return flag;
				},
				field: "formatType",
				icon: "EachApp_rili1",
				options: [
					{ value: "yearMonthDay", label: t("fieldType.date_time_obj.list3") },
					{ value: "year", label: t("fieldType.date_time_obj.list4") },
					{ value: "month", label: t("fieldType.date_time_obj.list5") }
				],
				chooseValue: "yearMonthDay" //选择的值
			}
		],
		5: [
			{
				value: 1,
				label: "选项",
				type: "list",
				field: "selectList",
				icon: "",
				options: [],
				chooseValue: [] //选择的值
			}
		],
		6: [
			{
				value: 1,
				label: "选项",
				type: "list",
				field: "selectList",
				icon: "",
				options: [],
				chooseValue: [] //选择的值
			}
		],
		9: [
			{
				value: 1,
				label: t("fieldType.mobile_phone_obj.title1"),
				tips: t("fieldType.mobile_phone_obj.tips1"),
				type: "select",
				field: "unit",
				icon: "EachApp_diqiu",
				options: [
					{ value: "+86", label: t("fieldType.mobile_phone_obj.list1"), next: "(+86)" },
					{ value: "+852", label: t("fieldType.mobile_phone_obj.list2"), next: "(+852)" },
					{ value: "+853", label: t("fieldType.mobile_phone_obj.list3"), next: "(+853)" },
					{ value: "+886", label: t("fieldType.mobile_phone_obj.list4"), next: "(+886)" }
				],
				chooseValue: "+86" //选择的值
			}
		],
		11: [
			{ value: 1, label: t("fieldType.attachment_upload_obj.title1"), tips: t("fieldType.attachment_upload_obj.tips1"), type: "input", icon: "EachApp_dingdan", chooseValue: "" } //选择的值
		],
		12: [
			{
				value: 1,
				label: t("fieldType.province_city_region_obj.title1"),
				tips: t("fieldType.province_city_region_obj.tips1"),
				type: "select",
				options: [
					{ value: 1, label: t("fieldType.province_city_region_obj.list1") },
					{ value: 2, label: t("fieldType.province_city_region_obj.list2") },
					{ value: 3, label: t("fieldType.province_city_region_obj.list3") },
					{ value: 4, label: t("fieldType.province_city_region_obj.list4") }
				],
				icon: "EachApp_diqiu",
				chooseValue: 1
			} //选择的值
		],
		13: [
			{
				value: 1,
				label: t("fieldType.user_obj.title1"),
				tips: t("fieldType.user_obj.tips1"),
				type: "select",
				icon: "EachApp_kaiguan1",
				options: [
					{ value: 1, label: t("fieldType.user_obj.list1") },
					{ value: 2, label: t("fieldType.user_obj.list2") }
				],
				chooseValue: 1
			} //选择的值
		],
		14: [
			{
				value: 1,
				label: t("fieldType.user_obj.title1"),
				tips: t("fieldType.user_obj.tips1"),
				type: "select",
				options: [
					{ value: 1, label: t("fieldType.user_obj.list1") },
					{ value: 2, label: t("fieldType.user_obj.list2") }
				],
				icon: "EachApp_kaiguan1",
				chooseValue: 1
			} //选择的值
		],
		15: [
			{
				value: 1,
				label: t("fieldType.user_obj.title1"),
				tips: t("fieldType.user_obj.tips1"),
				type: "select",
				options: [
					{ value: 1, label: t("fieldType.user_obj.list1") },
					{ value: 2, label: t("fieldType.user_obj.list2") }
				],
				icon: "EachApp_kaiguan1",
				chooseValue: 1
			} //选择的值
		],
	};
	return extraData;
};

export const useFieldRelation = () => {
	const arr = [
		{ value: 16,queryType:1, label: t("fieldType.relationship"), icon: "EachApp_guanxitu", component: FieldRalation },
		{ value: 17, label: t("fieldType.json"), icon: "EachApp_a-braces-line1" },
		{ value: 18, label: t("fieldType.array"), icon: "EachApp_brackets-line" },
		{ value: 19, label: t("fieldType.api_interface"), icon: "EachApp_kuohao" }
	];
	return arr;
};
// queryType（1全等，2模糊）
export const useField = () => {
	const arr = [
		{ value: 100, width: 120, fieldType: "text",queryType:2, label: t("fieldType.text"), icon: "EachApp_wenben", component: FieldText, default: "翼麒源于高效" },
		{ value: 1, width: 120, fieldType: "number",queryType:2, label: t("fieldType.number"), icon: "EachApp_a-9", component: FieldText, default: 16800 },
		{ value: 2, width: 160, fieldType: "price",queryType:2, label: t("fieldType.currency"), icon: "EachApp_qianbi", component: FieldPrice, default: 16800 },
		{ value: 3, width: 100, fieldType: "bool",queryType:1, label: t("fieldType.boolean"), icon: "EachApp_kaiguan1", component: FieldBool, default: "1" },
		{ value: 4, width: 150, fieldType: "dateTime",queryType:2, label: t("fieldType.date_time"), icon: "EachApp_rili", component: FieldTime, default: new Date() },
		{ value: 5, width: 200, fieldType: "select",queryType:1, label: t("fieldType.single_select"), icon: "EachApp_danxuan", component: FieldSelect, default: [{ style: "success", parm: "选项1" }] },
		{
			value: 6,
			queryType:3,
			fieldType: "multiSelect",
			width: 300,
			label: t("fieldType.multi_select"),
			icon: "EachApp_duoxuan",
			component: FieldSelect,
			default: [
				{ style: "success", parm: "选项1" },
				{ style: "info", parm: "选项2" }
			]
		},
		{ value: 7, width: 150,queryType:1, label: t("fieldType.rating"), icon: "EachApp_shoucang1", component: FieldRate, default: 2 },
		{ value: 8, width: 120,queryType:2, fieldType: "email", tag: true, label: t("fieldType.email"), icon: "EachApp_youjian", default: "each@ieachsoft.com", component: FieldText },
		{ value: 9, width: 120,queryType:2, fieldType: "phone", tag: true, label: t("fieldType.mobile_phone"), icon: "EachApp_shouji", default: "17708048005", component: FieldText },
		{ value: 10, width: 120,queryType:2, label: t("fieldType.link"), tag: true, icon: "EachApp_faxian", default: "iEachsoft", component: FieldText },
		{ value: 11, width: 120,queryType:2, label: t("fieldType.attachment_upload"), icon: "EachApp_shangchuan", default: "翼麒应用操作手册.pdf", component: FieldUpload },
		{ value: 12, width: 120,queryType:2, label: t("fieldType.province_city_region"), icon: "EachApp_dizhi", default: "四川省 成都市", component: FieldText },
		{ value: 13, width: 120,queryType:2, label: t("fieldType.user"), icon: "EachApp_nanxing", default: "用户", component: FieldText },
		{ value: 14, width: 120,queryType:2, label: t("fieldType.department"), icon: "EachApp_zuzhi1", default: "总经办", component: FieldText },
		{ value: 15, width: 120,queryType:2, label: t("fieldType.position"), icon: "EachApp_renyuan", default: "总经理", component: FieldText }
	];
	return arr;
};

// 用于展示的字段列表
export const useShowFieldList = () => {
	const arr = useField();
	const fieldRelation = useFieldRelation();
	return [...arr, ...fieldRelation];
};

// 根据类型和配置信息返回数据
/**
 *
 * @param type   字段类型
 * @param setForm //格式化对象
 * @param valueObj //内容
 * @returns
 */
export const getValue = (type, setForm, valueObj: any = null) => {
	let def = valueObj; //如果传入的值里面有default字段则用默认值(新增字段页面)，否则用传入的值
	switch (type) {
		case "number": //数字
			def = getNum(def, setForm);
			break;
		case "price": //货币
			def = getCoin(def, setForm);
			break;
		case "dateTime": //日期时间
			def = getTime(def, setForm);
			break;
		case "phone":
			// 电话
			def = getPhone(def, setForm);
			break;
	}
	return def;
};

const getNum = (def, form) => {
	let num = 0;
	const point = form.point; //百分号的位数
	const type = form.type; //数字类型
	num = formatNumber(def, point || 0);
	if (type == 2) {
		//百分比
		num = formatNumber(def > 100 ? 100 : def, point || 0);
		num = num + "%";
	}
	return num;
};

const getCoin = (def, form) => {
	if (def === "") return "-";
	let unit = form.unit || "¥";
	let type = form.priceType;
	return formatMoney(def, 2, ",", unit, type);
	return formatAmount(def, unit, type);
};

const getPhone = (def, form) => {
	const num = formatPhone(def, " ");
	return form?.unit + " " + num;
};

const getTime = (def, form) => {
	return formatDate(def, form.showTime, form.formatType);
};
